使用element |
您所在的位置：网站首页 › el-table expand有数据就展开 › 使用element |
使用element
|
涉及知识点： 1、不点击小箭头，点击其他列中的某个按钮展开行内容。 2、隐藏小箭头列（既然我们点击表格其他单元格展开行内容了，一般就不需要小箭头列了） 3、只展开一行内容 先直接上代码： 1 2 3 4 5 6 7 8 9 10 11 查看详情 12 13 14 15 16 17 18 {{ props.row.name }} 19 20 21 22 23 24 25 26 27 export default { 28 data() { 29 return { 30 tableData5: [{ 31 id: '1', 32 name: '好滋好味鸡蛋仔1', 33 desc: '荷兰优质淡奶，奶香浓而不腻1', 34 }, { 35 id: '2', 36 name: '好滋好味鸡蛋仔2', 37 desc: '荷兰优质淡奶，奶香浓而不腻2', 38 }, { 39 id: '3', 40 name: '好滋好味鸡蛋仔3', 41 desc: '荷兰优质淡奶，奶香浓而不腻3', 42 }, { 43 id: '4', 44 name: '好滋好味鸡蛋仔4', 45 desc: '荷兰优质淡奶，奶香浓而不腻4', 46 }] 47 }; 48 }, 49 methods: { 50 toogleExpand(row) { 51 let $table = this.$refs.table; 52 $table.toggleRowExpansion(row) 53 } 54 } 55 } 56我们一般会点击按钮去展开查看详情，所以我们替换箭头为“查看详情”按钮，通过toggleRowExpansion方法展开合闭expand。效果如图：
自己项目中遇到的问题是想要隐藏小箭头列，无意间发现这篇文章，原来只需要设置 width="1" 就行了。 因为我设置了 会多出1px的边距，所以我们可以再在最外层放一个空的div，设置样式overflow:hidden；再设置此table的样式margin-left:1px；好了，完美实现。（自己的项目中没有遇到1px影响效果的情况，可以直接设置宽度为1px即可） 放上项目最终的效果图，无多出的1px边框。
同样的，toggleRowExpansion方法也支持手风琴效果，点击展开自己的同时关闭原先除自己之外的已打开的展开项，实现手风琴，修改methods→toogleExpand方法：
1 toogleExpand(row) { 2 let $table = this.$refs.table; 3 this.tableData5.map((item) => { 4 $table.toggleRowExpansion(item, false) 5 }) 6 $table.toggleRowExpansion(row) 7 }
table的toggleRowExpansion方法可以传两个参数，第一个参数传row，第二个参数传false，意思是合闭expand。我们把每行的expand关闭一次，再把对应的行打开，这样就实现了手风琴效果了。 新的问题，当我们点击打开了手风琴，每次都至少有一个是打开状态的，这样很明显是bug了，我们做一下让已打开行的expand合闭。 bug原因：当我们点击已打开的expand想关闭它时，相当于走了一遍$table.toggleRowExpansion(row, false)后，又走了一遍$table.toggleRowExpansion(row)，所以这行的expand又被打开了。我们把“合闭/打开“的expand对应的行去除“合闭“操作。 修复toogleExpand方法： 1 toogleExpand(row) { 2 let $table = this.$refs.table; 3 this.tableData5.map((item) => { 4 if (row.id != item.id) { 5 $table.toggleRowExpansion(item, false) 6 } 7 }) 8 $table.toggleRowExpansion(row) 9 }点击展开内容时，遍历外层数组，找到除了当前点击的展开项之外的行，关闭除自己之外的已展开项，然后展开或者关闭当前点击的行。 嗯，就酱啦~ 参考文章：https://www.cnblogs.com/jiajialove/p/11477679.html
|
【本文地址】
今日新闻 |
推荐新闻 |